<template>
  <i-col :span="24">
    <div style="margin-bottom:14px;">
      <Input v-model="selectKey" style="width:200px;" placeholder="请输入设备id或者设备名称" @keyup.enter.native="init()"></Input>
      <Button style="margin-left:20px;" @click="init()">查询</Button>
    </div>
    <Table :data="tableData" :columns="columns" border :loading="loading">
    </Table>
    <Col class="panel page-panel cf" style="margin-top:10px;">
    <Page :total="pageInfo.total" show-total :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging"
      :page-size="20"></Page>
    </Col>
    <Modal v-model="visible" title="设备信息">
      <div>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">所属企业&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.companyName}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">所属区域&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.groupName}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">Iot ID&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.iotId}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">设备ID&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{ selectRow.id}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">所属产品&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.productName}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">设备位置&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.location}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">设备状态&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.statusText}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">设备秘钥&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.deviceSecret}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">创建时间&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.createdAt}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">激活时间&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.activedAt}}
          </dd>
        </dl>
        <dl class="basicInfo-block cf">
          <dt class="basicInfo-item name" style="width: 140px;font-size: 14px;">最近一次上线时间&nbsp;:</dt>
          <dd class="basicInfo-item value" style="text-align:right;font-size: 14px;">
            {{selectRow.onlineAt}}
          </dd>
        </dl>
      </div>
      <div slot="footer">
        <Button @click="visible=false">关闭</Button>
      </div>
    </Modal>
  </i-col>
</template>

<script>
import {
  getChildDeviceList,
  updateIotDevicePram,
  disableIotDevice,
  deleteIotDevice
} from '@/api'
export default {
  props: {
    id: {
      type: String,
      default: ''
    }
  },

  mounted() {
    this.init()
  },

  watch: {
    id() {
      this.init()
    }
  },

  data() {
    const vm = this
    return {
      selectKey: '',
      visible: false,
      tableData: [],
      loading: false,
      selectRow: {},
      pageInfo: {
        total: 0,
        page: 1
      },
      columns: [
        {
          title: '设备名称',
          align: 'center',
          key: 'deviceName'
        },
        {
          title: '设备位置',
          align: 'center',
          key: 'location'
        },
        {
          title: '在线状态',
          align: 'center',
          key: 'statusText'
        },
        {
          title: '报警状态',
          align: 'center',
          key: 'alarmStatusText'
        },
        {
          title: '更新时间',
          align: 'center',
          key: 'updatedAt',
          render(h, params) {
            const {
              row: { updatedAt }
            } = params
            return h(
              'span',
              updatedAt
                ? vm.moment(updatedAt).format('YYYY-MM-DD HH:mm:ss')
                : '-'
            )
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 220,
          render(h, params) {
            const { row } = params
            const { status } = row
            const btnArray =
              status === 'DISABLE'
                ? [
                    h(
                      'Poptip',
                      {
                        props: {
                          confirm: true,
                          title: '您确定要解禁该设备吗?',
                          transfer: true,
                          cancelText: '取消'
                        },
                        on: {
                          'on-ok': () => {
                            vm.handleEnable(row.id)
                          }
                        }
                      },
                      [
                        h(
                          'Button',
                          {
                            props: {
                              size: 'small',
                              type: 'success'
                            }
                          },
                          '解禁'
                        )
                      ]
                    )
                  ]
                : [
                    h(
                      'Poptip',
                      {
                        props: {
                          confirm: true,
                          title: '您确定要禁用该设备吗?',
                          transfer: true,
                          cancelText: '取消'
                        },
                        on: {
                          'on-ok': () => {
                            vm.handleDisable(row.id)
                          }
                        }
                      },
                      [
                        h(
                          'Button',
                          {
                            props: {
                              size: 'small'
                            }
                          },
                          '禁用'
                        )
                      ]
                    )
                  ]
            return h(
              'div',
              [
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        vm.handleCheck({ ...row })
                      }
                    },
                    style: {
                      marginRight: '5px'
                    }
                  },
                  '查看'
                ),
                h(
                  'Poptip',
                  {
                    props: {
                      confirm: true,
                      title: '您确定要删除这条数据吗?',
                      transfer: true,
                      cancelText: '取消'
                    },
                    on: {
                      'on-ok': () => {
                        vm.handleDelete({ ...row })
                      }
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                          // disabled:
                          //   true || params.row.name == '长沙平和堂五一广场店'
                        },
                        style: {
                          marginRight: '5px'
                        }
                      },
                      '删除'
                    )
                  ]
                )
              ].concat(btnArray)
            )
          }
        }
      ]
    }
  },

  methods: {
    async init() {
      const vm = this
      vm.loading = true
      if (this.id) {
        const params = {
          id: this.id,
          selectKey: this.selectKey,
          page: vm.pageInfo.page,
          size: 20
        }
        const { code, data } = await getChildDeviceList(params)
        if (code === 200) {
          vm.tableData = data.list
          vm.pageInfo.total = data.total
        } else {
          vm.tableData = []
          vm.pageInfo.total = 0
        }
      }
      vm.loading = false
    },

    async handleDelete(row) {
      const { id } = row
      const { code } = await deleteIotDevice(id)
      if (code === 200) {
        this.$Message.success('操作成功！')
        this.init()
      } else {
        this.$Message.error('操作失败，请刷新重试！')
      }
    },

    async handleCheck(row) {
      this.visible = true
      // console.log(row)
      this.selectRow = row
    },

    /**
     * 禁用设备
     */
    async handleDisable(id) {
      const { code } = await disableIotDevice(id)
      if (code === 200) {
        this.$Message.success('操作成功！')
        this.init()
      } else {
        this.$Message.error('操作失败，请稍后重试！')
      }
    },

    /**
     * 启用设备
     */
    async handleEnable(id) {
      const { code } = await disableIotDevice(id)
      if (code === 200) {
        this.$Message.success('操作成功！')
        this.init()
      } else {
        this.$Message.error('未知错误，请稍后重试！')
      }
    },

    /**
     * 切换分页
     */
    switchThePaging(index) {
      this.pageInfo.page = index
      this.init()
    }
  }
}
</script>
